<template>
  <div class="settlement">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/platform')"
    >
      <template #right>
        <img src="../../image/切换.png" alt="" />
        <span>Amazon</span>
        <img src="../../image/下拉.png" alt="" />
      </template>
    </van-nav-bar>
    <div class="top">
      <div class="orderone">
        <span>00001订单匹配结果 </span>
        <button>零售</button>
        <button>批发</button>
      </div>
      <p>0000002 订单匹配截至</p>
      <!-- 倒计时 -->
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
    <div class="in">
      <div class="shu">
        <!-- 数量增加 -->
        <span>快捷选择</span>
        <van-stepper v-model="va" integer />
      </div>
      <!-- 横杠 -->
      <hr />
      <!-- 四个按钮 -->
      <div class="botton">
        <van-button
          round
          type="info"
          :class="{ leftboxchosing: chosing, leftboxnochosing: !chosing }"
          @click="changeBoxClass"
          >批发</van-button
        >
        <van-button
          round
          type="info"
          :class="{ leftboxchosing: chosing, leftboxnochosing: !chosing }"
          @click="changeBoxClass"
          >零售</van-button
        >
        <van-button
          round
          type="info"
          :class="{ leftboxchosing: chosing, leftboxnochosing: !chosing }"
          @click="changeBoxClass"
          >优品</van-button
        >
        <van-button
          round
          type="info"
          :class="{ leftboxchosing: chosing, leftboxnochosing: !chosing }"
          @click="changeBoxClass"
          >统货</van-button
        >
      </div>
      <!-- 清单底色 -->
      <div class="detailed">
        <img src="../../image/清单BG.png" alt="" class="qing" />
        <!-- 灰色 -->
        <div class="noordertemporarily" v-if="!chosing">
          <img src="../../image/暂无订单.png" alt="" class="tu" />
          <div class="wu">暂无订单</div>
        </div>
        <!-- 按钮点亮时显示清单 -->
        <div class="commodity" v-else>
          <!-- 每个元素的两侧间隔相等 -->
          <van-row type="flex">
            <van-col span="7"
              ><img src="../../image/充值.png" alt="" />批发</van-col
            >
            <van-col span="8"><span>20.00</span> &nbsp; 元</van-col>
            <van-col span="9"><van-stepper v-model="va" integer /></van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="7"
              ><img src="../../image/零售.png" alt="" />零售</van-col
            >
            <van-col span="8"><span>20.00</span>元</van-col>
            <van-col span="9"><van-stepper v-model="va" integer /></van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="7"
              ><img src="../../image/优品.png" alt="" />优品</van-col
            >
            <van-col span="8"><span>20.00</span>元</van-col>
            <van-col span="9"><van-stepper v-model="va" integer /></van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="7"
              ><img src="../../image/统货.png" alt="" />统货</van-col
            >
            <van-col span="8"><span>20.00</span>元</van-col>
            <van-col span="9"><van-stepper v-model="va" integer /></van-col>
          </van-row>
        </div>
      </div>
      <!-- 商标 -->
      <div class="trademark">
        <img src="../../image/1.png" alt="" />
        <img src="../../image/2.png" alt="" />
        <img src="../../image/3.png" alt="" />
        <img src="../../image/4.png" alt="" />
        <img src="../../image/5.png" alt="" />
        <img src="../../image/6.png" alt="" />
        <img src="../../image/7.png" alt="" />
      </div>
    </div>
    <div class="lower">
      <div class="balance">
        <div class="left">
          账户余额:
          <span> 2000.00</span>元
        </div>
        <div class="right">
          <button>清空选择</button>
        </div>
      </div>
      <div class="count">
        <div class="left2">
          总数：
          <span>0</span>
        </div>
        <div class="right2">总计：<span>0.00</span> 元</div>
      </div>
      <van-submit-bar
        button-text="提交订单"
        :class="{ leftboxchosing: chosing, leftboxnochosing: !chosing }"
        @click="changeBoxClass"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      va: 1,
      time: 10,
      chosing: false,
    };
  },
  methods: {
    changeBoxClass() {
      this.chosing = !this.chosing;
    },
  },
};
</script>

<style lang="less" scoped>
.settlement {
  height: 100vh;
  .van-nav-bar__right {
    span {
      padding: 0 10px;
    }
  }
  /deep/.van-nav-bar .van-icon,
  /deep/.van-nav-bar__text {
    font-size: 40px;

    color: #000;
  }
  // 上
  .top {
    position: fixed;
    width: 100%;
    height: 280px;
    z-index: 1;
    background: url("../../image/上图.png") no-repeat center;
    .orderone {
      width: 460px;
      height: 70px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-left: 30px;
      color: #fff;
      font-size: 16px;
      button {
        border-radius: 30px;
        border: 1px solid #fff;
        background-color: #f7a18b;
        font-size: 20px;
        opacity: 0.9;
      }
    }
    p {
      padding: 20px 60px;
      margin: 0;
      color: #fff;
      font-size: 30px;
    }
    // 倒计时
    .van-count-down {
      padding-left: 60px;
    }
    .colon {
      display: inline-block;
      font-size: 50px;
      margin: 0 4px;
      color: #fff;
    }
    .block {
      display: inline-block;
      width: 88px;
      height: 75px;
      color: #000;
      font-size: 50px;
      text-align: center;
      line-height: 75px;
      background: url("../../image/数字底色.png");
    }
  }
  // 中
  .in {
    position: fixed;
    width: 100%;
    height: 900px;
    z-index: 10;
    top: 330px;
    opacity: 0.8;
    background: url("../../image/下色.png") no-repeat;
    //截至时间
    .shu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
      padding: 50px 50px 0;
      /deep/.van-stepper__minus--disabled,
      /deep/.van-stepper__input,
      /deep/.van-stepper__plus {
        background-color: #fff;
        border: 3px solid lightgrey;
        color: #000;
        font-weight: 700;
      }
      /deep/.van-stepper__input {
        width: 100px;
      }
    }
    //分割线
    hr {
      width: 90%;
      color: #f0f0f0 !important;
      opacity: 0.5;
    }
    //四个按钮
    .botton {
      display: flex;
      margin-top: 40px;
      justify-content: space-evenly;
      align-items: center;
      .van-button--normal {
        width: 150px;
        height: 70px;
        background-color: #fff;
        color: #5c5d60;
        font-size: 35px;
        border: 1px solid #e0d7d7;
      }
      .leftboxchosing {
        background-image: linear-gradient(181deg, #fa7d22, #fa461b);
        color: #fff;
      }
    }
    //清单底色
    .detailed {
      width: 100%;
      height: 500px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .qing {
        padding-top: 60px;
      }
      .noordertemporarily {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        .tu {
          width: 300px;
          height: 300px;
          position: fixed;
          top: 650px;
        }
        .wu {
          position: fixed;
          top: 970px;
          font-size: 28px;
          color: #78787b;
        }
      }
      //列表清单
      .commodity {
        position: fixed;
        top: 620px;
        width: 92%;
        height: 470px;
        // background-color: pink;
        .van-row--flex {
          height: 25%;
        }
        .van-col--8 {
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: none;
          padding-left: 60px;
          span {
            color: red;
          }
        }
        .van-col--7,
        .van-col--9 {
          font-size: 30px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .van-stepper {
            /deep/.van-stepper__minus--disabled,
            /deep/.van-stepper__input,
            /deep/.van-stepper__plus {
              background-color: #fff;
              border: 2px solid lightgrey;
              color: #000;
              font-weight: 700;
              height: 70px;
              border-radius: 10px;

              .van-stepper__plus {
                font-size: 20px;
              }
            }
            /deep/.van-stepper__minus--disabled,
            /deep/.van-stepper__plus {
              width: 70px;
            }
            /deep/.van-stepper__input {
              width: 100px;
            }
          }
        }
      }
    }
    // 商标
    .trademark {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        padding: 40px 0;
      }
    }
  }
  //下
  .lower {
    position: fixed;
    top: 1250px;
    width: 100%;
    height: 300px;
    font-size: 30px;
    border-radius: 20px;
    span {
      color: #ec5d29;
    }
    .balance,
    .count {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .left,
    .right,
    .left2,
    .right2 {
      padding: 0 30px;
    }
    .balance {
      width: 100%;
      height: 100px;
      background-color: #f9f9f9;
      button {
        background-color: #fff;
        color: #5c5d60;
        border-radius: 30px;
        border: 1px solid #e0d7d7;
      }
    }
    .count {
      width: 100%;
      height: 100px;
    }
    .van-submit-bar__button {
      width: 95%;
      height: 80px;
      position: fixed;
      top: 1450px;
      left: 15px;
      text-align: center;
      span {
        color: #fff;
      }
    }
    .van-button--round {
      border-radius: 10px;
      font-size: 35px;
    }
    /deep/.van-submit-bar__button--danger {
      background: #ec5d29;
    }
  }
}
</style>
